<template>
  <div id="splashDrone">
		<div class="swiper-container">
			<!-- 滚动内容 -->
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="https://cdn.swellpro.com/splashDrone/cn/banner-1.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="https://cdn.swellpro.com/splashDrone/cn/banner-2.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="https://cdn.swellpro.com/splashDrone/cn/banner-3.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="https://cdn.swellpro.com/splashDrone/cn/banner-4.jpg" alt="">
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div class="first">
			<h1>水手3+</h1>
			<div class="container">
				<p>
					一台功能和配置更强大的防水无人机！
				</p>
				<p>
					全面提升和扩展了水手3的功能，水手3+是斯威普迄今为止更优秀的防水无人机。采用模块化防水配件，如4K相机或投放装置，可以根据用户需求自行搭配。水手3+用途广泛，可用于航拍，钓鱼，救援和科研等领域。是一个多功能、全天候的防水飞行平台。
				</p>
			</div>
		</div>
		<div class="second">
			<div class="container">
				<h2>一个平台，多种应用</h2>
				<div class="content">
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-12.png" alt="">
							<p>引人注目的外观颜色</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-10.png" alt="">
							<p>延长飞行时间</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-2.png" alt="">
							<p>3级低电预警</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-13.png" alt="">
							<p>遥控器全新设计</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-5.png" alt="">
							<p>增加水面翻转功能</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-4.png" alt="">
							<p>信号定位功能</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-3.png" alt="">
							<p>电路板防潮涂层增强</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-6.png" alt="">
							<p>飞行控制器全面优化</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-9.png" alt="">
							<p>硬件框架和4K相机改进</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-8.png" alt="">
							<p>增加散热片</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-1.png" alt="">
							<p>机顶盖人性化设计</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/icon-7.png" alt="">
							<p>防水性能增强</p>
						</div>
					</div>
					<!-- <div class="item"></div> -->
					<div class="item">
						<div style="margin-top:60px">
							<img src="https://cdn.swellpro.com/splashDrone/icon-11.png" alt="">
							<p>无人机配件增加</p>
						</div>
					</div>
					<!-- <div class="item"></div> -->
				</div>
			</div>
		</div>
		<div class="third">
			<h2>机身坚固且防水</h2>
			<div class="container">
				<p>水手3+机身由坚固耐用的3mm高强度ABS材料制成，确保完全密封。</p>
				<p>
					无人机至少要经过两次压力测试，来保证它优秀的防水性能。其所有外部零件均耐腐蚀，适用于海水和淡水环境。轻松实现雨天飞行、雪天飞行、水上飞行、水面起降等。
				</p>
				<div class="content">
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/WB1.png" alt="">
							<p>浮动设计</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/WAC.png" alt="">
							<p>耐腐蚀</p>
						</div>
					</div>
					<div class="item">
						<div>
							<img src="https://cdn.swellpro.com/splashDrone/AW.png" alt="">
							<p>全天候使用（雨雪天气）</p>
						</div>
					</div>
				</div>
				<img src="https://cdn.swellpro.com/splashDrone/Swellpro%20Exclusive%20Ventilation%20Technology.png" alt="">
			</div>
		</div>
		<div class="fourth">
			<div class="container">
				<p>定制设计的机身面盖带有通气孔，在防水的同时确保气压计的准确性</p>
				<h2>强大的动力系统</h2>
				<p>全新的S3飞行控制器，集成了新的传感器和强大的动力系统，加强了灵敏度和准确性，这意味着你可以在雨和雪天气中更加自信和安全地操控水手3+。</p>
				<img src="https://cdn.swellpro.com/splashDrone/S3%20Flight%20Controller.png" alt="">
				<p class="title">S3飞行控制器</p>
				<p>S3不断检查错误并提供冗余来提高飞行安全性和稳定性。双模式GPS锁定最多24颗来自GPS和GLONASS系统的卫星，以提高定位的精度和速度。</p>
				<img src="https://cdn.swellpro.com/splashDrone/change.png" alt="">
				<p class="title">快拆式螺旋桨</p>
				<p>重新设计的碳纤维螺旋桨重量轻，硬度高，可以有效地将发动机的动力转化为推力。快拆式设计使螺旋桨能够快速安全地连接到电机上，使用起来简单便捷。</p>
				<img src="https://cdn.swellpro.com/splashDrone/High%20Thrust%20Motors.png" alt="">
				<p class="title">高推力发动机</p>
				<p>强大的新电机为水手3+提供充足的飞行动力，增加了飞行速度和荷载能力。特殊的涂层确保抵抗盐水腐蚀。</p>
				<img src="https://cdn.swellpro.com/splashDrone/controll.png" alt="">
				<h2>一体化遥控器</h2>
			</div>
		</div>
		<div class="fifth">
			<div class="container">
				<p>水手3+配有一个定制设计、完全集成的遥控器。重新设计的遥控器很大限度地提高了使用效率和易用性。高亮度5英寸FPV屏幕清楚地显示实时视频和覆盖(OSD)飞行数据，无需任何额外的设备。飞行，投放和相机控制都可在一个遥控器完成</p>
				<div class="content">
					<img src="https://cdn.swellpro.com/splashDrone/Cruise%20Mode.png" alt="">
					<p class="title">智能航向模式</p>
					<p>将遥控器切换到智能航向模式，可使用单个摇杆同时控制飞机前进和转向，从而使您的飞行路线更平滑，拍出电影感画面效果。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Smooth+ Control.png" alt="">
					<p class="title">新增旋钮微调控制</p>
					<p>遥控器新增了旋钮微调控制功能。从操纵杆切换到无人机旋转、方向或轨道的精细旋钮控制，可以实现精准飞行及拍摄出平稳流畅的视频。</p>
				</div>
				<h2>智能飞行</h2>
				<p>添加地面站选项，将您的手机或支持GPS的平板电脑连接到地面站后，即可通过手机APP操控水手3+。Swellpro FLY APP可实现多种智能飞行模式，大大减少了飞手的手动输入，让飞行更加简单。</p>
				<div class="content">
					<img src="https://cdn.swellpro.com/splashDrone/follow.png" alt="">
					<p class="title">自动跟随</p>
					<p>切换到跟随模式，水手 3+将在您移动状态时实现自动跟随，并同时录制超高清的画面。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Mission Planning.png" alt="">
					<p class="title">航点规划</p>
					<p>在地图上连续选择若干个航点，水手3+将自动按照指定的路线飞行，还可以设置在某个航点停留和飞行的高度</p>
					<img src="https://cdn.swellpro.com/splashDrone/Circling Flight.png" alt="">
					<p class="title">绕圈飞行</p>
					<p>选择环绕的半径和绕圈的数量，以为任意一个航点为中心，一键捕捉完美的全景视频</p>
					<img src="https://cdn.swellpro.com/splashDrone/Tap to Fly.png" alt="">
					<p class="title">指点飞行</p>
					<p>点击地图上你想要无人机去的地方，水手3+将自动导航至目的地并悬停</p>
				</div>
				<h2>飞行安全</h2>
				<p>水手3+具有多层保护措施，即使在复杂的环境下，也能让无人机安全返回</p>
				<div class="content">
					<img src="https://cdn.swellpro.com/splashDrone/Return Home.png" alt="">
					<p class="title">自动返航</p>
					<p>如果信号丢失，水手3+返回起点，轻轻地降落。你也可以在app上点击返回home键，或者在遥控器上点击返回 home键来取回无人机。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Low battery Alerts.png" alt="">
					<p class="title">低电量预警</p>
					<p>在飞行过程中，如果电池电压达到预定的三个警告级别，遥控器会为飞手显示一个清晰的闪烁通知。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Low Battery Auto-landing.png" alt="">
					<p class="title">低电自动降落</p>
					<p>当水手3+电池电压达到了第三个警告级别时，它将执行自动降落功能，防止坠毁。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Lost Drone Location Beacon.png" alt="">
					<p class="title">定位信标</p>
					<p>如果你无意中丢失或坠毁了你的飞行器，即使电池电量很低，你也能立即在应用地图上找到无人机的位置。</p>
					<img src="https://cdn.swellpro.com/splashDrone/Self-righting when floating.png" alt="">
					<p class="title">自动翻转</p>
					<p>如果飞行器在水面上呈倒扣状态， 水手3+可以实现水面翻转功能，随时准备再次起飞。</p>
				</div>
				<h2>一个平台，多种应用</h2>
			</div>
		</div>
		<div class="end">
			<div class="container">
				<div class="item">
					<img src="https://cdn.swellpro.com/splashDrone/Filming.png" alt="">
					<div class="shadow">
						<p>航拍</p>
					</div>
				</div>
				<div class="item">
					<img src="https://cdn.swellpro.com/splashDrone/fishing.png" alt="">
					<div class="shadow">
						<p>钓鱼</p>
					</div>
				</div>
				<div class="item">
					<img src="https://cdn.swellpro.com/splashDrone/boating.png" alt="">
					<div class="shadow">
						<p>游艇</p>
					</div>
				</div>
				<div class="item">
					<img src="https://cdn.swellpro.com/splashDrone/Rescue.png" alt="">
					<div class="shadow">
						<p>搜救 和 科研</p>
					</div>
				</div>
			</div>
		</div>
		<a class="buy" href="https://detail.tmall.com/item.htm?spm=a230r.1.14.8.6aa8420eSYXqor&id=579860536948&cm_id=140105335569ed55e27b&abbucket=3">
			<span class="left">购买</span>
			<span class="right">水手3+</span>
		</a>
	</div>
</template>

<script>
import Swiper from 'swiper'; 
import 'swiper/dist/css/swiper.min.css';
export default {
  data () {
    return {
    };
  },

    head() {
    	return {
    		title: '水手3+旗舰版 | 多功能全天候防水无人机 - 斯威普',
    		meta: [
    	   		{ hid: 'description', name: 'description', content: '水手3+旗舰版是水手系列目前为止最先进的防水无人机。凭借着强大的研发实力和水准，斯威普团队打造出了一款由全新飞行计算机，传感器和动力系统相结合，并配有UltraHD 4K摄像头的多功能防水无人机。' },{ hid: 'keywords', name: 'keywords', content: '水手三代旗舰版' }
    		]
    	}
    },

  components: {},

  computed: {},

  mounted() {
      var mySwiper = new Swiper('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: true,

        effect: 'coverflow',

        clickable: true,

        touchRatio: 0.8,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination'
        }
    })
  },

  methods: {}
}

</script>
<style lang='stylus'>
body
    img
        display block
#splashDrone
    .swiper-slide
        transition-duration .7s!important
        img
            width 100%
    .swiper-pagination-bullet-active
        background #cfcfcf
        width 23px
        border-radius 15px
    .container
        >img
            width 100%
            margin-bottom 30px
    p
        line-height 30px
    h2
        text-align center
        font-weight 400
        font-size 30px
        width 800px
        margin 0 auto
        padding-bottom 30px
    .title
        color #f26444
        font-size 20px
        text-align center
        font-weight 400
    .strong
        font-weight 600
        font-size 14px
    .first
        margin-bottom 60px
        h1
            color #f4704d
            text-align center
            margin 20px 0
            font-size 35px
            font-weight 400
    .second
        margin-bottom 80px
        .content
            background rgba(244,244,244,1)
            display flex
            flex-flow row wrap
            padding 50px 0
            align-items baseline
            .item
                flex 0 0 33.3333%
                display flex
                justify-content center
                align-items center
                box-sizing border-box
                padding 0 15px
                margin-bottom 50px
                >div
                    img
                        width 80px
                        margin 0 auto
                        text-align center
                    p
                        text-align center
                        margin-top 20px
    .third
        .content
            display flex
            align-items baseline
            margin 50px 0
            .item
                flex 1
                display flex
                justify-content center
                align-items center
                >div
                    img
                        width 80px
                        margin 0 auto
                        text-align center
                    p
                        text-align center
                        margin-top 20px
    .fourth
        .container
            width 850px
            p
                margin-bottom 30px
                &:first-child
                    margin-bottom 60px
    .fifth
        p
            margin-bottom 30px
            text-align center
        .content
            width 850px
            margin 0 auto
            margin-bottom 80px
            img
                width 100%
                margin-bottom 30px
    .end
        margin 30px 0 60px
        .container
            display flex
            flex-flow row wrap
            .item
                flex 0 0 50%
                position relative
                cursor pointer
                overflow hidden
                img 
                    width 100%
                .shadow
                    position absolute
                    width 100%
                    height 100%
                    left 0px
                    top 0px
                    background rgba(0,0,0,.4)
                    display flex
                    justify-content center
                    align-items flex-end
                    box-sizing border-box
                    padding-bottom 20px
                    color #fff
                    font-weight 400
                    font-size 22px
                    transition all .6s
                    &:hover
                        background rgba(0,0,0,0)
    .buy
        display block
        text-align center
        margin-bottom 60px
        font-size 0px
        >span
            font-size 25px
            letter-spacing 10px
            margin 0px
            padding 0px
        .left
            border-bottom 1px solid #000
        .right
            color #f26444
            border-bottom 1px solid #f26444
</style>